<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width:500px;
            height: 300px;
            background:red;
            /*圆角边框*/
            /*按方向写*/
            /*border-top-left-radius: 30px;*/
            /*border-top-right-radius: 40px;*/
            /*border-bottom-left-radius: 50px;*/
            /*border-bottom-right-radius: 60px;*/


            /*简写*/
            /*四个角都是20px*/
            /*border-radius: 20px;*/

            /*左上和右下20px  右上和左下是60px*/
            /*border-radius:20px 60px;*/

            /*左上20px  右上和左下是50px  右下70px*/
            /*border-radius:20px 50px 70px;*/

            /*左上  右上  右下  左下*/
            border-radius: 20px  30px 60px 80px;
        }
        .d2{
            width:200px;
            height: 200px;
            background:yellow;
            border-radius:100px;
        }
        .d3{
            width:100px;
            height:200px;
            background:cyan;
            border-radius:0px 100px 100px 0px;
        }
        .d4{
            width:200px;
            height: 100px;
            background:hotpink;
            border-radius:0px 0px 100px 100px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</body>
</html>